<%--
  Created by IntelliJ IDEA.
  User: FT
  Date: 2020/9/22
  Time: 15:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>头</title>
    <style>
        img{
            width: 200px;
            height: 56px;
        }
        input{
            display: inline-block;
        }
    </style>
    <script>
        $(function () {

            $("#detail-img").click(function () {
                // 点击图片时触发文件表单控件
                $("#picFile").click();
            });

            $("#picFile").change(function () {
                // 构造文件上传form
                var formData = new FormData();
                formData.append("iconFile", document.getElementById("picFile").files[0]);

                // 上传图片
                $.ajax({
                    url: "/img/updatePic",
                    processData: false,      //默认为true,对请求传递的参数(formData)不做编码处理
                    contentType: false,       //不对请求头做处理
                    data: formData,
                    type: "post",
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.code == '200') {
                            //成功
                            $("#detail-img").attr("src", "/img/getHead?pic=" + data.msg+'&nocache='+new Date().getMilliseconds());
                        } else {
                            alert(data.msg);
                        }
                    }
                });

            });
        });

    </script>
</head>
<body>
<div id="top">
    <img id="detail-img" src="/img/getHead?pic=${loginUser.pic}" alt="加载中"/>

    <!-- 真正的头像图片上传表单 -->
    <input type="file" id="picFile" style="display: none;">
    <%--<img id="img" src="${pageContext.request.contextPath}/img/getHead?pic=${loginUser.pic}" alt="加载中">
    <form action="${pageContext.request.contextPath}/img/updatePic" enctype="multipart/form-data" method="post">
        <input type="file" name="img">
        <input type="submit" value="修改图片">
    </form>--%>
</div>
</body>
</html>
